<template>
    <div class="courseDail">

        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="课程描述">
                <div v-html="list.courseDetail" class="courseIntroduction"></div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="目录" force-render>
                <div class="directory" v-for="(item,index) in directory" :key="index">
                    <div class="oneItem"><span>{{index+1}}.</span><span>{{item.sectionName}}</span></div>
                    <ul class="twoItem">
                        <li v-for="(item,index1) in item.subSections" :key="index1.id">
                            <span>{{index+1}}-{{index1+1}}</span><span>{{item.sectionName}}</span>
                            <p v-if="list.isFree==1?flag:false" class="icon">
                                <a-icon type="play-circle"/>
                            </p>
                            <p v-if="list.isFree==1?!flag:false" class="world">观看</p>
                        </li>
                    </ul>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="评论">
                <div>
                    <p>评论</p>
                    <p> <span>
    <a-rate v-model="value1" :tooltips="desc"/>
    <span class="ant-rate-text">{{ desc[value1 - 1] }}</span>
  </span>
                    </p>
                    <div>
                        <a-list
                                v-if="comments.length"
                                :data-source="comments"
                                :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
                                item-layout="horizontal"
                        >
                            <a-list-item slot="renderItem" slot-scope="item">
                                <a-comment
                                        :author="item.author"
                                        :avatar="item.avatar"
                                        :content="item.content"
                                        :datetime="item.datetime"
                                />
                            </a-list-item>
                        </a-list>
                        <a-comment>

                            <div slot="content">
                                <a-form-item>
                                    <a-textarea :rows="4" :value="value" @change="handleChange"
                                                placeholder="请发表您对课程的评价"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button html-type="submit" :loading="submitting" type="primary"
                                              @click="handleSubmit" style="float: right">
                                        发表评论
                                    </a-button>
                                </a-form-item>
                            </div>
                        </a-comment>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>

</template>

<script>
    import {courseDetail} from "../api/api";
    import moment from 'moment';

    export default {
        name: "CourseDetailTab.vue",
        data() {
            return {
                list: [],
                directory: [],
                value1: 3,
                desc: ['差', '一般', '中等', '好', '非常好'],
                comments: [],
                submitting: false,
                value: '',
                moment: "",
                flag: true
            }
        },
        methods: {
            callback(key) {
                console.log(key);
            },
            handleSubmit() {
                if (!this.value) {
                    return;
                }
                this.submitting = true;

                setTimeout(() => {
                    this.submitting = false;
                    this.comments = [
                        {
                            author: 'Han Solo',
                            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                            content: this.value,
                            datetime: moment().fromNow(),
                        },
                        ...this.comments,
                    ];
                    this.value = '';
                }, 1000);
            },
            handleChange(e) {
                this.value = e.target.value;
            },
        },
        created() {
            courseDetail(this.$route.query.courseId).then(res => {
                console.log(res)
                this.list = res.data;
                this.directory = res.data.sections;
                console.log(this.directory)
            });
        }
    }
</script>

<style scoped lang="less">
    .courseDail {
        width: 1200px;
        margin: 0px auto;
        background-color: #ffffff;
        padding: 0px 25px;
    }

    .courseIntroduction {
        width: 1200px;

        p {
            margin: 0px;
            padding: 0px;
            display: inline-block;
            text-indent: 2px;
        }
    }

    .directory {
        width: 1200px;
    }

    .oneItem {
        font-weight: 500;
        font-size: 22px;
        color: rgba(0, 0, 0, .85);

        span:nth-of-type(2) {
            margin-left: 15px;
        }
    }

    .twoItem li {
        height: 50px;
        padding: 15px 20px;
        background-color: #F2F2F2;
        /*line-height: 30px;*/
        margin: 10px 0px;

        span:nth-of-type(2) {
            margin-left: 15px;
        }

        p {
            float: right;
            margin-right: 50px;
        }
    }

    .twoItem li:hover {
        color: #00CF8C;
        cursor: pointer;
    }
    icon {
        display: block;
    }
    .icon:hover {
        display: none;
    }
    world {
        display: none;
    }
    world:hover {
        display: block;
    }
</style>